<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>物业管理系统</title>
		
		<base href="<%=basePath%>">
		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/vivo.css">
		<link rel="stylesheet" href="css/cmxform.css">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	
		
		<script src="js/jquery-1.11.1.js"></script>
		<link href="js/select2/select2.min.css" type="text/css" rel="stylesheet" />
		<script src="js/select2/select2.min.js"></script>
		<script src="js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
		<script src="js/jquery.validation/1.14.0/messages_zh.min.js"></script>
		<script type="text/javascript" src="js/sharefunction.js"></script>

		<style type="text/css">
			.primary-vdd {
				color: #fff;
				background-color: #5a98de;
				border-color: #5a98de;
			}
			
			.primary-vdd:hover {
				color: #fff;
				background-color: #0a6999;
				border-color: #0a6999;
			}
		</style>
		<script type="text/javascript">
			
			$(document).ready(function() {
				//处理用户已有角色默认选中
				var userRoles = $("#userRoles").val();
				$('input[name="roles"]').each(function(){
					var val = $(this).parent().text().trim();
					val=val.substring(val.indexOf(".")+1);
					if(userRoles.indexOf(val)!=-1){
						$(this).attr("checked",'true');
					}
				});
				
			});
		
			//存盘数据
			function saveUserRoles() {
				var roles = jqchk();
				if(roles.length==0){alert("请选择角色!");return false;}
				var url = "admin/org/role/saveUserRoles";
				var userId = $("#userId").val();
				roles = JSON.stringify(roles);
				jQuery.ajax({
					type : "post",
					async : false,
					url : url,
					dataType : "json",
					data : {
						userId : userId,
						roles : roles
					},
					success : function(data) {
						if (data.success) {
							closeLayerAndMsg(data.msg);
						} else {
							closeLayerAndMsg(data.msg);
						}
					}
				});
			}
			
			function jqchk(){ //jquery获取复选框值 
				var chk_value =[]; 
				$('input[name="roles"]:checked').each(function(){ 
					chk_value.push($(this).val()); 
				}); 
				return chk_value;
			} 
			
			//全选:反选
			function checkAll(val){
				if(val){
					$("[name='roles']").attr("checked",'true');//全选 
				}else{
					$("[name='roles']").removeAttr("checked");//取消全选
				}
			}
		</script>
	
	</head>
	<body>
		<div class="panel panel-default">
		  <div class="panel-heading">请选择相应的用户角色进行分配~</div>
		  <div class="panel-body">
		  <div>
		  	<label>
          		<input name="ck_all" id="ck_all" value="1" type="checkbox" onclick="checkAll(this.checked)"> 全部
        	</label>
        	</div>
	      	<c:forEach items="${requestScope.list}" var="role" varStatus="status">  
	      		<span style="width:20%;float:left;">
		        	<label>
		          		<input name="roles" value="${role.id}" type="checkbox"> ${status.index+1 }.${role.roleName}
		        	</label>
		      	</span>
			</c:forEach>  
		  </div>
		</div>
		<div style="width: 100%; text-align: center; padding-top: 20px">
			<button class="btn btn-primary radius primary-vdd" type="button" onclick="saveUserRoles()">分配角色</button>
			<a class="btn btn-default radius" onClick="closeLayer();"> 取 消 </a>
			<br />
			<br />
		</div>
		
		<div style="display:none">
			<input id="userRoles" name="userRoles" type="hidden" value="${userRoles}" />
			<input id="userId" name="userId" type="hidden" value="${userId}" />
		</div>
	</body>
</html>